<!DOCTYPE html>
<html>
<head>
	<title>图片截取</title>
	<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
	<link rel="stylesheet" href="<?php p(HTTP_URL) ?>/statics/jcrop/css/jquery.Jcrop.css" />
    <?php p(INC_JQUERY) ?>
    <script type="text/javascript" src="<?php p(HTTP_URL) ?>/statics/jcrop/js/jquery.Jcrop.js"></script>
    <script type="text/javascript">
    	jQuery(function($) {
    		var jcrop_api, boundx, boundy,
    		$preview = $('#preview-pane'),
    		$pcnt = $('#preview-pane .preview-container'),
    		$pimg = $('#preview-pane .preview-container img'),
    	    xsize = $pcnt.width(),
    	    ysize = $pcnt.height();
    	    $('#target').Jcrop({
    			onChange: updatePreview,
    			onSelect: updatePreview,
    			aspectRatio: xsize / ysize,
    			bgColor: 'black', 
    			bgOpacity: 0.4
    		}, function() {
    			var bounds = this.getBounds();
    			boundx = bounds[0];
    			boundy = bounds[1];
    			jcrop_api = this;
    			$preview.appendTo(jcrop_api.ui.holder);
    			jcrop_api.setSelect([0, 0, xsize, ysize]); 
    			jcrop_api.setOptions({allowSelect: false});
    			jcrop_api.focus();
    	    });
    		function updatePreview(c) {
    			if (parseInt(c.w) > 0) {
    				var rx = xsize / c.w;
    				var ry = ysize / c.h;
    				$pimg.css({
    					width: Math.round(rx * boundx) + 'px',
    					height: Math.round(ry * boundy) + 'px',
    					marginLeft: '-' + Math.round(rx * c.x) + 'px',
    					marginTop: '-' + Math.round(ry * c.y) + 'px'
    				});
    				$('#id_x').val(c.x);
    				$('#id_y').val(c.y);
    				$('#id_w').val(c.w);
    				$('#id_h').val(c.h);
    			}
    		};
    	});
    </script>
    <style type="text/css">
    	.jcrop-holder #preview-pane {
    		display: block;
    		position: absolute;
    		z-index: 2000;
    		left: 100%;
    		margin-left:5px;
    		padding: 2px;
    		border: 1px #ccc solid;
    		background-color: #ccc;
    	}
    	#preview-pane .preview-container {
    		width: <?php p($w) ?>px;
    		height: <?php p($h) ?>px;
    		overflow: hidden;
    	}
    </style>
</head>
<body>
    <div id="preview-pane">
    	<div class="preview-container">
    		<img src="<?php p(HTTP_URL . $path) ?>" class="jcrop-preview" alt="" />
    	</div>
    	<div style="margin-top:3px;">
    		<form method="post" action="">
    			<input type="hidden" name="x" id="id_x" value="" />
    			<input type="hidden" name="y" id="id_y" value="" />
    			<input type="hidden" name="w" id="id_w" value="" />
    			<input type="hidden" name="h" id="id_h" value="" />
    			<label title="选中表示保存为新图片,否则覆盖原图."><input type="checkbox" name="new_file" <?php $blnNewFile && p('checked="checked"') ?> value="1" />新文件</label>
    			<input type="submit" name="sub_btn" value="保存" />
    			<input type="button" onclick="window.opener = null; window.open('', '_self'); window.close();" value="取消" />
    		</form>
    	</div>
    </div>
    <img src="<?php p(HTTP_URL . $path) ?>" id="target" alt="" />
<?php include(TPL_PATH . '/admin/inc_footer.php'); ?>